<template>
    <div class="app-container">
        <!--查询过滤-->
        <div class="filter-container">
            <el-input v-model="listQuery.search" placeholder="请输入搜索关键词" style="width: 200px;" class="filter-item" @keyup.enter.native="SearchData" />
            <j-advanced-query v-model="listQuery.query" :fields="fields" @change="SearchData" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="SearchData">搜索</el-button>
        </div>
        <!--动作组-->
        <div class="action-container">
            <el-button-group>
                <el-button class="action-item" type="primary" icon="el-icon-edit" @click="HandleCreate">添加</el-button>
                <el-button class="action-item" icon="el-icon-delete" @click="BatchDelete">删除</el-button>
            </el-button-group>
        </div>
        <!--表开始-->
        <el-table ref="singleTable" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" @sort-change="sortChange">
            <el-table-column type="selection"></el-table-column>
            {volist name="data['columns']" id="item" key="i"}
            {if $item.col_key=='PRI'}<el-table-column align="center" label="ID-{$item.field_desc}" style="text-align:center;">
            <template slot-scope="{row}">
                <el-link :href="'#/{$data.table_name}/detail?{$item.field}='+ row.{$item.field}" type="primary">{{ row.{$item.field} }}</el-link>
            </template>
        </el-table-column>
            {else /}<el-table-column align="center" prop="{$item.field}" label="{$item.field_desc}" style="text-align:center;"></el-table-column>
            {/if}
            {/volist}
<el-table-column align="center" width="180" label="操作">
            <template slot-scope="{row}">
                <el-button type="text" icon="el-icon-edit" @click="HandleUpdate(row)">编辑</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-dropdown @command="RowCommand">
                    <span class="el-button--text">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{row,'command':'delete'}">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
            </el-table-column>
            <!--列结束-->
        </el-table>
        <!--分页-->
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="loadData" />
    </div>
</template>
<script>

import api from '@/api/{$data.table_name}'
import commonList from '@/utils/commonList'
// import Pagination from '@/components/Pagination' // 推荐全局注册

export default {
    name: '{$data.class_name}List',
    // components: { Pagination },
    mixins: [commonList],
    created() {
        this.loadData() // 页面加载创建时加载数据
    },
    data() {
        return {
            api,
            fields:[
                {foreach name="data['columns']" item='item' key='i'}
                {if $item.data_type=='datetime'}{ 'name': '{$item.field}', 'label': '{$item.field_desc}','type': 'datetime' },
                {elseif $item.data_type=='decimal'}{ 'name': '{$item.field}', 'label': '{$item.field_desc}','type': 'number' },
                {else/}{ 'name': '{$item.field}', 'label': '{$item.field_desc}' },
                {/if}{/foreach}]
        }
    },
    methods:{
    }
}
</script>